<template>
  <view class="pay-way-cell flex items-center ml-24 pt-30 pb-30">
    <image v-if="icon" :src="icon" mode="scaleToFill" class="pay-icon mr-26" />
    <view v-else class="pay-icon mr-26"></view>
    <view class="flex flex-col">
      <text :class="['font-bold', 'text-333', `font-${titleSize}`]">{{ title }}</text>
      <text v-if="desc" class="font-26 text-666 mt-10">{{ desc }}</text>
      <slot v-else name="desc"></slot>
    </view>
    <slot name="discount"></slot>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
export default {
  name: "pay-way-cell",
  mixins: [hook, weixin],
  props: {
    icon: {
      type: String,
      default: ""
    },
    desc: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    titleSize: {
      type: [String, Number],
      default: 34
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.pay-icon {
  width: 44rpx;
  height: 44rpx;
}
</style>
